<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html" xml:lang="ko" lang="ko">
    <head>
        <title>二维码生成器</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
        <script type="text/javascript" src="../js/lib/jquery.min.js"></script>
        <script type="text/javascript" src="../js/lib/jquery.qrcode.min.js"></script>

        <style>
            .buttonClass {
                font-size: 16px;
                font-family: "微软雅黑", Arial, sansserif;;
            }
        </style>
    </head>
    <body>
        <center>
            <input id="sku1" type="text" value="http://www.baidu.com" style="width:40%;margin-top:20px;"/>
            <a href="" target="_Blank" id="skip1">跳转</a>
            <input type="button"value="复制" class="buttonClass" onclick="copySku('sku1')"/>
            <br/>
            <input id="sku2" type="text" value="http://www.baidu.com" style="width:40%;margin-top:20px;"/>
            <a href="" target="_Blank" id="skip2">跳转</a>
            <input type="button" value="复制" class="buttonClass" onclick="copySku('sku2')"/>
            <br/>
            <input id="sku3" type="text" value="http://www.baidu.com" style="width:40%;margin-top:20px;"/>
            <a href="" target="_Blank" id="skip3">跳转</a>
            <input type="button" value="复制" class="buttonClass" onclick="copySku('sku3')"/>
            <br/>
            <div style="margin-top:20px;">
                <div id="qrcode" style="width:200px; height:200px;display: inline-block "></div>
                <div id="qrcode2" style="width:200px; height:200px;margin-left:100px;display: inline-block"></div>
                <div id="qrcode3" style="width:200px; height:200px;margin-left:100px;display: inline-block"></div>
            </div>
        </center>
        <script type="text/javascript">
            var qrcode1 = new QRCode(document.getElementById("qrcode"), {
                width: 200,
                height: 200
            });
            var qrcode2 = new QRCode(document.getElementById("qrcode2"), {
                width: 200,
                height: 200
            });
            var qrcode3 = new QRCode(document.getElementById("qrcode3"), {
                width: 200,
                height: 200
            });

            //获取查询参数
            function getQueryParam(paramName) {
                var re = new RegExp(paramName + "=([^]*)", "i");
                var search = document.location.search;
                if (search) {
                    var res = re.exec(search);
                    // console.log(res);
                    if (res == null) {
                        return null;
                    }
                    var content = res[1];
                    var list = content.split("____");
                    for (let i = 0; i < list.length; i++) {
                        document.getElementById('sku'+(i+1)).value = list[i];
                    }
                    return;
                }
                return null;
            }

            getQueryParam("content");

            function makeCode() {
                var elText = document.getElementById("sku1");
                var elText2 = document.getElementById("sku2");
                var elText3 = document.getElementById("sku3");
                if (elText.value) {
                    qrcode1.makeCode(elText.value);
                    $("#skip1").attr("href", elText.value);
                }
                if (elText2.value) {
                    qrcode2.makeCode(elText2.value);
                    $("#skip2").attr("href", elText2.value);
                }
                if (elText3.value) {
                    qrcode3.makeCode(elText3.value);
                    $("#skip3").attr("href", elText3.value);
                }
            }

            makeCode();

            $("#sku1").on("blur", function () {
                makeCode();
            }).on("keydown", function (e) {
                if (e.keyCode == 13) {
                    makeCode();
                }
            });
            $("#sku2").on("blur", function () {
                makeCode();
            }).on("keydown", function (e) {
                if (e.keyCode == 13) {
                    makeCode();
                }
            });
            $("#sku3").on("blur", function () {
                makeCode();
            }).on("keydown", function (e) {
                if (e.keyCode == 13) {
                    makeCode();
                }
            });

            function copySku(id){
                var elText = document.getElementById(id);
                copyText(elText.value);
            }

            //复制
            function copyText(text) {
                if (text == "") {
                    return false;
                }
                var textarea = document.createElement("textarea");
                var currentFocus = document.activeElement;
                document.body.appendChild(textarea);
                textarea.value = text;
                textarea.focus();
                if (textarea.setSelectionRange)
                    textarea.setSelectionRange(0, textarea.value.length);
                else
                    textarea.select();
                try {
                    var flag = document.execCommand("copy");
                } catch(eo){
                    var flag = false;
                }
                document.body.removeChild(textarea);
                currentFocus.focus();
                return flag;
            }
        </script>
    </body>
</html>